<template>
  <div>
    <van-nav-bar title="标题" left-text="123" />
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <van-swipe :autoplay="3000" lazy-render class="banner">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="5">
      <van-grid-item icon="https://robohash.org/1231" text="文字" />
      <van-grid-item icon="https://robohash.org/1231" text="文字" />
      <van-grid-item icon="https://robohash.org/1231" text="文字" />
      <van-grid-item icon="https://robohash.org/1231" text="文字" />
      <van-grid-item icon="https://robohash.org/1231" text="文字" />

      <van-grid-item icon="https://robohash.org/1231" text="文字" />
      <van-grid-item icon="https://robohash.org/1231" text="文字" />
      <van-grid-item icon="https://robohash.org/1231" text="文字" />
      <van-grid-item icon="https://robohash.org/1231" text="文字" />
      <van-grid-item icon="https://robohash.org/1231" text="文字" />
    </van-grid>
    <!-- 列表 -->
    <ul>
      <li v-for="(v, i) in list" :key="i">
        <dl style="display: flex;" @click="router.push({
          path: '/detail',
          query: v
        })">
          <dt>
            <img :src="v.img" alt="" width="120" height="150" />
          </dt>
          <dd>
            <p>{{ v.title }}</p>
            <p>{{ v.desc }}</p>
            <p>{{ v.price }}</p>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter()
const value = ref('');
const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
const list = ref([]);
const getList = async () => {
  const resp = await axios.get('/list');
  console.log(resp.data);
  list.value = resp.data.data;
}
getList()


</script>

<style lang="scss">
.banner {
  width: 100%;
  height: 200px;

  img {

    width: 100%;
    height: 100%;
  }
}
</style>

